//符
//首页

<template>
  <!-- <router-link to="/info"><button>？人主页按钮</button></router-link> -->
  <div class="all_mainPage">
    <div class="display_box">
      <!--  -->
      <div class="display_bg">
        <img :src="carousel[flag].cover" style="width: 100%" alt="" />
      </div>
      <div class="carousel_box">
        <div class="display_album">
          <div class="display_list">
            <div
              :class="{ choose: currentIndex == index }"
              class="HOT_album"
              v-for="(item, index) in carousel"
              :key="index"
              @click="ChangePic(index)"
            >
              {{ item.name }}
            </div>
            <!--因为循环后每个按钮的index值不一样了-->
          </div>
          <!-- lunbo -->
          <div class="carousel_father">
            <div class="carousel_son" :ref="carousel_son">
              <div class="display_pic animate__animated animate__fadeInRight">
                <!--carousel[flag]          v-for="(item0,index) in carousel" :key ="index"    -->
                <img
                  @click="toAlbum()"
                  class="display_carousel_pic"
                  :src="carousel[flag].cover"
                  style="width: 940px; height: 502px"
                  alt=""
                />
                <div class="album_info">
                  <div class="album_name">{{ carousel[flag].name }}</div>
                  <div class="album_singer">{{ carousel[flag].author }}</div>
                  <div class="album_word">{{ carousel[flag].description }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  -->
    </div>
    <!-- -------- -->
    <div class="all_list">
      <div class="HOT_songlist">
        <!-- 标题 -->
        <div class="title_songlist">
          <div class="songlist_pic">
            <img
              src="../assets/playlist.png"
              style="width: 28px; height: 30px"
              alt=""
            />
          </div>
          <div class="title_name1_box">
            <div class="title_name1">hot歌单</div>
            <div class="underline_green"></div>
          </div>
        </div>
        <!--内容  -->
        <!-- 要用v-for -->
        <div class="song_list_box">
          <HOTsonglist :HOT="HOTsong.slice(0, 5)" />
        </div>
      </div>
      <!-- ----------------- -->
      <!-- 标题 -->
      <div class="new_album">
        <div class="title_newAlbum">
          <div class="newAlbum_sign">
            <img
              src="../assets/album.png"
              style="width: 24px; height: 24px"
              alt=""
            />
          </div>
          <div class="title_name2_box">
            <div class="title_name2">新专上架</div>
            <div class="underline_green"></div>
          </div>
        </div>
        <!--内容  -->
        <!-- 要用v-for -->
        <div class="newAlbum_box">
          <NEWalbum :NEW="NEWalbum.slice(0, 5)" />
        </div>
        <!-- slice(0,5)截取5个对象 -->
      </div>
      <!-- -------------------------------------------- -->
      <div class="HOTlist">
        <div class="title_HOTlist">
          <div class="sign_HOTlist">
            <img
              src="../assets/list.png"
              style="width: 24px; height: 24px"
              alt=""
            />
          </div>
          <div class="title_name3_box">
            <div class="title_name3">hotlist</div>
            <div class="underline_green"></div>
          </div>
        </div>
        <!--内容  -->
        <!-- 要用v-for -->
        <!-- 下面为黑边内容 -->
        <div class="HOTsong_NEWsong">
          <!-- -------------------    热歌榜                          -->
          <ranking :rankingbox="rankingbox1" :ranking="ranking1" ref="rank1" />
          <!-- ------------           新歌榜                  ---------- -->
          <ranking :rankingbox="rankingbox2" :ranking="ranking2"  ref="rank2"/>
        </div>
      </div>
    </div>
  </div>
  <router-view />
</template>
<script>
import HOTsonglist from "../components/mainPage_box/HOT_songlist.vue";
import NEWalbum from "../components/mainPage_box/NEW_album.vue";
import ranking from "../components/mainPage_box/ranking.vue";

export default {
  name: "mainPage",
  components: {
    HOTsonglist,
    NEWalbum,
    ranking,
  },
  mounted() {
    // 创建定时器
    this.timer = setInterval(this.timingChange, 10000);
  },
  unmounted() {
    //销毁
    clearInterval(this.timer);
  },
  created() {
    this.$http
      .get("/hotalbum", {
        params: {
          limit: 5,
        },
      })
      .then((res) => {
        this.carousel = res.data.data;
      });
    this.$http
      .get("/hotplaylist", {
        params: {
          limit: 5,
        },
      })
      .then((res) => {
        this.HOTsong = res.data.data;
      });

    this.$http
      .get("/newalbum", {
        params: {
          limit: 10,
        },
      })
      .then((res) => {
        this.NEWalbum = res.data.data;
      });
    // ---------------------
    this.$http
      .get("/hotsongs", {
        params: {
          limit: 6,
        },
      })
      .then((res) => {
        this.ranking1 = res.data.data;
        this.$refs.rank1.isRank=1;
      });
    this.$http
      .get("/newsongs", {
        params: {
          limit: 6,
        },
      })
      // --------------------------
      .then((res) => {
        this.ranking2 = res.data.data;
        this.$refs.rank2.isRank=2;
      });
  },
  data() {
    return {
      
      // album_pic: require("../assets/首页轮播图.jpg"),
      album_name: "专辑名",
      album_singer: "歌手",
      album_word: "街旁黑篮，鲜花绽放",
      flag: 1,
      id: "",
      HOTsong0: [],
      NEWalbum0: [],
      currentIndex: 0, //当前轮播的下标
      timer: null, //初始化定时器变量
      carousel: [], //轮播图
      carouselBTN: [{ id: "0", btn: "hot专辑一" }],

      HOTsong: [], //hot歌单
      NEWalbum: [
        {
          pic: require("../assets/harry-cunningham-_1J2AioiNC0-unsplash.jpg"),
          name: "bbb",
          info: "bbb",
          videoView: "99+",
          videoComment: "99+",
        },
      ],
      
      rankingbox1: [
        {
          sign: require("../assets/hot.png"),
          listname: "热歌榜",
        },
      ],
      ranking1: [{ num: "1", songName: "你猜", singer: "你再猜" }],
      // -----------------
      rankingbox2: [
        {
          sign: require("../assets/new.png"),
          listname: "新歌榜",
        },
      ],
      ranking2: [{ num: "1", songName: "你猜", singer: "你再猜" }],
    };
  },
  watch: {
    currentIndex: {
      handler() {
        if (this.currentIndex > 4) {
          this.currentIndex = 0;
        }
        this.flag = this.currentIndex;
      },
      immediate: true,
    },
  },
  methods: {
    ChangePic(index) {
      this.flag = index;
      this.currentIndex = index;
    },
    timingChange() {
      this.currentIndex++;
    },
    toAlbum() {
      this.$router.push({
        path: "/album_info",
        query: {
          id: this.carousel[this.flag].id,
          flag:1,
        },
      });
    },
  },
 
};
// 获取该图此时的index 然后获取你点按钮的index 相减再移动宽*距离
</script>
<style scoped>
a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;
}
.all_mainPage {
  width: 100%;
  /* overflow: hidden; */
}
.display_bg {
  float: left; /**为什么背景仍然在盒子后 */
  margin: 0 auto;
  width: 100%;
  height: 630px;
  overflow: hidden;
  position: relative; /**给黑色图层相对定位 */
}
.display_bg img {
  filter: blur(4px);
  width: 110%;
  margin-top: -10px;
}
.display_bg::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 630px;
  opacity: 0.5;
  background: #000;
}
.display_box {
  /* position: relative; */
  width: 100%;
  height: 630px;
  margin: 0 auto;
}
.display_album {
  display: flex;
  justify-content: space-between;
  width: 1193px;
}
.carousel_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 630px;
  margin: 0 auto;
  position: absolute;
}
.HOT_album:hover {
  transition-duration: 0.5s;
  transform: scale(1.02, 1.02);
  cursor: pointer;
  color: #21262c;
}
.display_list .choose {
  transform: scale(1.02, 1.02);
  color: #21262c;
}

.HOT_album {
  width: 228px;
  height: 100px;
  background: #659274;
  text-align: center;
  line-height: 100px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
  text-shadow: 0px 2px 4px rgba(78, 78, 78, 0.64);

  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #fff;
}
.display_pic {
  position: relative;
  float: left;
  cursor: pointer;
  width: 940px;
  height: 502px;
  overflow: hidden;
}
.carousel_son {
  position: absolute;
  width: 4700px;
  height: 502px;
  z-index: 1;
}
.carousel_father {
  position: relative;
  display: flex;
  cursor: pointer;
  width: 940px;
  height: 502px;
  overflow: hidden;
}
.display_carousel_pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album_info {
  position: absolute;
  display: flex;
  flex-direction: column;
  /* width:;
    height: ; */
  left: 32px;
  bottom: 26px;
  cursor: pointer;

  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.album_name {
  margin-bottom: 9px;
  font-size: 48px;
  font-family: "HYGangYiTiJ";
  font-weight: 600;
  color: #ffffff;
  /* line-height: 66px; */
  cursor: pointer;
}
.album_singer {
  margin-bottom: 9px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.album_word {
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
}
/* ------------------------------------------------ */
.all_list {
  width: 1198px;
  /* height: 2252px; *暂时设置 */
  background: #ffffff;
  box-shadow: 0px 2px 27px 0px rgba(0, 0, 0, 0.47);
  margin: 0 auto;
  padding: 47px 58px 70px;
  overflow: hidden;
}

.title_songlist {
  display: flex;
}
.songlist_pic {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  background: #21262c;
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.title_name1_box {
  position: relative;
  width: 102px;
  height: 28px;
}
.title_name1 {
  position: absolute;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #21262c;
  height: 26px;
  top: 6px;
  border-radius: 5px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
  /* background: linear-gradient(to bottom, #659274 50%, #659274 100%) no-repeat;
  background-size: calc(50%-12px);
  background-position: center;*/
}
.underline_green {
  width: 103px;
  height: 11px;
  margin-top: 26px;
  background: #659274;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
/***歌单 */
.song_list_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ---------------------------------- */
.title_newAlbum {
  display: flex;
  margin-top: 30px;
}
.newAlbum_sign {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  background: #21262c;
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.title_name2_box {
  position: relative;
  width: 102px;
  height: 28px;
}
.title_name2 {
  position: absolute;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #21262c;
  height: 26px;
  top: 6px;
  border-radius: 5px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
  /* background: linear-gradient(to bottom, #659274 50%, #659274 100%) no-repeat;
  background-size: calc(50%-12px);
  background-position: center;*/
}
.underline_green {
  width: 103px;
  height: 11px;
  margin-top: 26px;
  background: #659274;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
/***歌单 */
.newAlbum_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* -------------------------- */
.title_HOTlist {
  display: flex;
  margin: 30px 0 20px;
}
.sign_HOTlist {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  background: #21262c;
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.title_name3_box {
  position: relative;
  width: 102px;
  height: 28px;
}
.title_name3 {
  position: absolute;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #21262c;
  height: 26px;
  top: 6px;
  border-radius: 5px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
  /* background: linear-gradient(to bottom, #659274 50%, #659274 100%) no-repeat;
  background-size: calc(50%-12px);
  background-position: center;*/
}
.underline_green {
  width: 103px;
  height: 11px;
  margin-top: 26px;
  background: #659274;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.HOTsong_NEWsong {
  display: flex;
  justify-content: space-between;
  background-color: #21262c;
}
</style>
